import React, { Component, PropTypes } from 'react';
import {
  View,
  Platform,
  StyleSheet,
  TouchableOpacity,
  Text,
  Image,
  TextInput,
  DeviceEventEmitter,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
// import fetchModifyName from '../../actions/ModifyPersonActions';
import Request from '../../utils/request';
import Login from '../../containers/LoginContainer';

export default class ModifyEmail extends Component {
  static propTypes = {
    saler: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      newPwd: '',
      oldPwd: '',
    };
  }
  back() {
    this.props.navigator.pop();
  }

  commit() {
    const saler = this.props.saler;
    if (saler) {
      if (this.state.newPwd === this.state.oldPwd) {
        this.modifyPwdRequet(saler.username, saler.sex, saler.intro,
       `${saler.utype}`, saler.uid, saler.workbeginday, saler.email,
       this.state.newPwd, this.state.oldPwd);
        if (navigator) {
          this.props.navigator.pop();
        }
      } else {
        DeviceEventEmitter.emit('showToast', '新密码与确认密码不一致');
      }
    }
    // this.props.getEmail(this.state.text);
  }

  modifyPwdRequet(username, sexs, intro, utype, uid, workbeginday, email, password, password2) {
    let sex = '';
    if (sexs === 1) {
      sex = '男';
    } else {
      sex = '女';
    }
    Request.post({
      url: '/dealer/staff',
      data: {
        username,
        sex,
        intro,
        utype,
        uid,
        workbeginday,
        email,
        password,
        password2,
        from: 'dealerstaffconfig',
      },
      success: (data) => {
        const keys = data && Object.keys(data);
        if (keys.length) {
          return;
        }
        DeviceEventEmitter.emit('showToast', '密码修改成功，请重新登录');
        this.props.navigator.resetTo({
          name: 'Login',
          component: Login,
        });
      },
      fail: () => {
        DeviceEventEmitter.emit('showToast', '修改密码失败');
      },
      error: () => {
        DeviceEventEmitter.emit('showToast', '修改密码失败');
      },
    });
  }

  render() {
    return (
      <View style={[style.flex, style.bg]}>
        <View style={[style.header, style.row]}>
          <TouchableOpacity
            style={[style.flex, style.titleStart]}
            onPress={() => this.back()}
          >
            <Image style={style.backIcon} source={require('../../img/go_back.png')} />
          </TouchableOpacity>
          <View style={[style.flex, style.center]}>
            <Text style={style.nameTitle}>更改密码</Text>
          </View>
          <TouchableOpacity
            style={[style.flex, style.titleEnd]}
            onPress={() => this.commit()}
          >
            <Text style={style.commit}>完成</Text>
          </TouchableOpacity>
        </View>
        <View style={[style.container, style.row]}>
          <Text style={style.textLeft}>新密码</Text>
          <TextInput
            style={[style.flex, style.tp1]}
            onChangeText={newPwd => this.setState({ newPwd })}
            password
            underlineColorAndroid="transparent"
            secureTextEntry
          />
        </View>
        <View style={[style.container, style.row]}>
          <Text style={style.textLeft}>确认密码</Text>
          <TextInput
            style={[style.flex, style.tp2]}
            onChangeText={oldPwd => this.setState({ oldPwd })}
            password
            underlineColorAndroid="transparent"
            secureTextEntry
          />
        </View>
      </View>
    );
  }
}
const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bg: {
    backgroundColor: '#F5F5F5',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  header: {
    height: PxToDp(46),
    backgroundColor: '#fff',
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleStart: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: PxToDp(10),
  },
  titleEnd: {
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: PxToDp(10),
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  nameTitle: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#121212',
  },
  commit: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#F65252',
  },
  container: {
    height: PxToDp(54),
    backgroundColor: '#fff',
    marginTop: PxToDp(24),
    alignItems: 'center',
    paddingLeft: PxToDp(15),
  },
  tp1: {
    marginLeft: PxToDp(61),
  },
  tp2: {
    marginLeft: PxToDp(45),
  },
  textLeft: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(16),
    color: '#333333',
  },
});
